<template>
  <div class="event-container">
    <toppanel
      :title="title"
      :titleColor="titleColor"
      back-visible
      use-toggle
      bgcolor="transparent"
    />
    <scalebox :ratio="2">
      <swiper
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
        :current="currentTab"
        previous-margin="-5px"
        next-margin="-5px"
        @change="switchTab"
        circular
        class="swiper-corner"
      >
        <swiper-item
          v-for="(item,index) in swipers"
          :key="index"
          class="swiper-corner-item"
        >
          <view class="swiper-item">
            <image
              :src="item.thumb"
              mode="aspectFill"
            />
            <div :class="item.class">
              {{item.title}}
            </div>
          </view>
        </swiper-item>
      </swiper>
      <template slot="mark">
        <view class="imageCount">图片{{currentTab+1}}/{{swipers.length}}</view>
      </template>
    </scalebox>

    <scroll-view
      :scroll-x="scroll.x"
      :scroll-y="scroll.y"
      class="scroll-container"
    >
      <van-cell-group
        custom-class="match-panel van-cell-group-radius"
        :border="false"
      >
        <van-cell
          :title="title"
          custom-class="autofit-cell match-panel-info"
          use-label-slot
        >
          <view class="match-rate">
            <h1 class="match-rate-point">4.4<small>分</small></h1>
            <van-rate
              readonly
              :value="4.4"
              :size="10"
              allow-half
              color="#ff6600"
              void-color="#eee"
              void-icon="star"
            />
          </view>
          <view slot="label">
            <view
              class="match-board"
              v-if="board"
            >
              <view class="match-board-icon">{{board.icon}}</view>
              <view class="match-board-text">{{board.title}}</view>
            </view>
            <view
              class="vant-tags"
              v-if="!board && tags.length>0"
            >
              <van-tag
                :color="tag.color"
                :text-color="tag.textColor"
                :plain="tag.plain"
                v-for="(tag,index) in tags"
                :key="index"
              >{{tag.text}}</van-tag>
            </view>
          </view>
        </van-cell>
        <van-cell
          value="赛事信息"
          size="small"
          custom-class="autofit-cell"
          is-link
        >
          <view slot="title">
            <tags
              separator
              :items="intros"
            />
          </view>
        </van-cell>
        <van-cell
          title="贵州省黔东南苗族侗族自治州凯里市、雷山县、丹寨县"
          :border="false"
          size="small"
          is-link
        />
      </van-cell-group>

      <van-cell-group custom-class="matchitem-group van-cell-group-radius">
        <van-cell
          title="赛事项目"
          custom-class="van-cell-group__header"
        />
        <van-cell
          :title="item.title"
          :data-name="item.id+ ''"
          :custom-class="checkedItemId===item.id+''?'matchitem-group-cell matchitem-group-cell__checked':'matchitem-group-cell'"
          use-label-slot
          v-for="(item,index) in items"
          :key="index"
          clickable
          center
          @click="onItemClick"
        >
          <view class="match-enroll">
            <price
              :value="item.price"
              :decimal="0"
              color="#ff6600"
            ></price>
            <van-button
              round
              block
              size="small"
              color="linear-gradient(to right, #ffb76b, #ff7f04)"
              @click="onClickEnroll"
            >报名</van-button>
          </view>
          <view slot="label">
            <view>
              {{item.description}}
            </view>
            <tags
              separator
              :items="item.tags"
              v-if="item.tags && item.tags.length>0"
            />
            <view>
              报名 {{item.enrolls}} <span>报名须知</span>
            </view>
          </view>
        </van-cell>
      </van-cell-group>

      <van-cell-group custom-class="van-cell-group-radius">
        <van-cell
          title="问大家"
          value="查看全部"
          custom-class="van-cell-group__header"
        />
        <van-cell
          icon="question"
          title="请问开始报名了吗"
          value="1个答案"
          custom-class="question-item"
        />
      </van-cell-group>
      <safe-guard />
    </scroll-view>
  </div>
</template>

<script>
import Scalebox from '@/components/scalebox'
import toppanel from '@/components/toppanel'
import price from '@/components/price'
import card from '@/components/card'
import Tags from '@/components/tags'
import SafeGuard from '@/components/safeGuard'
import { getMatch } from '@/api'

export default {
  components: {
    card,
    toppanel,
    price,
    Tags,
    Scalebox,
    SafeGuard
  },

  data () {
    return {
      id: 0,
      scroll: {
        x: false,
        y: true
      },
      navBackgroundColor: '#ff6600',
      value: '',
      statusBarHeight: 20, // 状态栏高度
      titleBarHeight: '', // 标题栏高度
      navBarHeight: '', // 导航栏总高度
      currentTab: 0, // 预设当前项的值
      scrollLeft: 0, // tab标题的滚动条位置
      expertList: [
        {
          // 假数据
          img: 'avatar.png',
          name: '欢顔',
          tag: '知名情感博主',
          answer: 134,
          listen: 2234
        }
      ],
      board: {
        icon: '榜',
        title: '2019赛事排名榜 第1名'
      },
      tags: [
        {
          color: '#ffe1e1',
          textColor: '#ad0000',
          text: '官方'
        },
        {
          color: '#ffe1e1',
          textColor: '#ad0000',
          text: '路跑'
        }
      ],
      intros: [
        {
          color: '#67C0FA',
          text: '正常营业'
        },
        {
          text: '2019-04-29 ~ 08-21'
        },
        {
          text: '100Km+'
        }
      ],
      apis: {
        recommend: 'home/recommend'
      },
      title: '2020黔东南超100公里国际马拉松',
      titleColor: '#000000',
      username: 'EMHOME',
      gender: 2,
      avatar: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
      cover: 'http://oss.youmbe.com/assets/ucenter/background.jpg',
      video: '/static/icons/video.png',
      checkedItemId: 0,
      show: false,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      swipers: [
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/01.jpg',
          class: 'demo-text-1'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/02.jpg',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/03.jpg',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/scenic/04.jpg',
          class: 'demo-text-3'
        }
      ],
      data: {
        name: 'test',
        thumb: 'http://oss.youmbe.com/attachments/avatar/29.jpg',
        begintime: '2019-09-21',
        description: 'test',
        likes: '22'
      },
      items: [
        {
          id: 1,
          title: '单日赛（食宿自理）',
          fulltitle: '男、女个人马拉松单日赛（食宿自理）',
          price: 100,
          enrolls: 85,
          description: '包括参赛包和黔东南苗族侗族自治州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '食宿自理'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 2,
          title: '单日赛（含食宿）',
          fulltitle: '男、女个人马拉松单日赛（含食宿）',
          price: 500,
          enrolls: 894,
          description:
            '报名费包括组委会提供的比赛前一日的食宿费用和比赛当日的早、中餐费用以及参赛包和黔东南州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '含食宿'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 3,
          title: '三日赛（食宿自理）',
          fulltitle: '男、女个人超100公里三日赛（食宿自理）',
          price: 200,
          enrolls: 326,
          description:
            '包含组委会提供的交通转场费用、参赛包和黔东南苗族侗族自治州旅游通票，转场需前往组委会指定的地点乘坐转场大巴',
          tags: [
            {
              color: '#67C0FA',
              text: '食宿自理'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        },
        {
          id: 4,
          title: '三日赛（含食宿）',
          fulltitle: '男、女个人超100公里三日赛（含食宿）',
          price: 1480,
          enrolls: 59,
          description:
            '报名费包含组委会提供的比赛期间食宿与交通费用以及参赛包和黔东南州旅游通票',
          tags: [
            {
              color: '#67C0FA',
              text: '含食宿'
            },
            {
              color: '#67C0FA',
              text: '官方'
            },
            {
              text: '报名中'
            }
          ]
        }
      ]
    }
  },
  onLoad (option) {
    this.id = option.id
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  computed: {
    matchItemPrice () {
      let currentTarget = this.items.find(
        (v) => v.id + '' === this.checkedItemId
      )
      console.log(this.checkedItemId)
      console.log(currentTarget)
      if (currentTarget) {
        return currentTarget.price
      }
      return ''
    }
  },
  methods: {
    // 获取数据方法
    getList () {
      console.log('event/index getList')
      getMatch(1)
        .then((res) => {
          console.log(res)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 滚动切换标签样式
    switchTab (e) {
      this.currentTab = e.mp.detail.current
    },
    // 点击标题切换当前页时改变样式
    swichNav (e) {
      var cur = e.mp.target.dataset.current
      if (this.currentTab === cur) {
        return false
      } else {
        this.currentTab = cur
      }
    },
    onItemChange (event) {
      this.checkedItemId = event.mp.detail
      console.log('onItemClick', this.checkedItemId)
    },
    onItemClick (event) {
      console.log(event)
      console.log(event.mp)
      const { name } = event.mp.currentTarget.dataset
      this.checkedItemId = name
      console.log('onItemClick', this.checkedItemId)
    },
    showPopup () {
      this.show = true
    },
    onClose () {
      this.show = false
    },
    onClickEnroll () {
      let id = this.checkedItemId
      wx.navigateTo({
        url: '/pages/enroll/index/main?id=' + id
      })
      console.log('onClickEnroll')
    }
  },
  onShow () {
    console.log('onShow')
    this.getList()
  },
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.title,
      path: '/pages/match/main?id=' + this.id + '&from=share'
    }
  }
}
</script>

<style lang="less">
// .comp-navbar {
//   background: transparent;
// }
.place-item {
  width: 100%;
  height: 100px;
  background: #ff6600;
  border-radius: 5px;
  margin-bottom: 10px;
}

.swiper-corner {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.swiper-item {
  height: 100%;
  image {
    width: 100%;
    height: 100%;
    display: block;
  }
  div {
    height: 100%;
  }
}
.imageCount {
  display: inline-block;
  border-radius: 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 10px;
  bottom: 20px;
  font-size: 10px;
  padding: 4px 10px;
}

.scroll-container {
  padding: 0 10px;
  background: #f2f3f4;
  margin-top: -10px;
}
.match-panel {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  &-info {
    .van-cell__title {
      font-size: 18px;
      font-weight: bold;
    }
    .van-cell__label {
      margin-top: 10px;
    }
    .van-cell__value {
      flex: none;
    }
    .match-rate {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      padding-left: 15px;
      position: relative;
      margin-left: 15px;
      &::before {
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: #f2f3f4;
        transform: scale(0.5, 1);
      }
      &-point {
        font-size: 18px;
        color: coral;
        font-weight: bold;
      }
    }
    .match-board {
      display: flex;
      align-items: center;
      &-icon {
        background: #1f2322;
        color: #fff;
        border-radius: 3px 0 0 3px;
        padding: 2px 5px;
      }
      &-text {
        color: #333;
        background: #fedab7;
        border-radius: 0 3px 3px 0;
        font-size: 12px;
        padding: 2px 5px;
      }
    }
  }
}

.van-cell-group__title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  padding: 15px 15px 15px 20px !important;
  position: relative;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
  &::after {
    content: "";
    width: 3px;
    height: 1em;
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -0.5em;
    background: #ff6600;
    border-radius: 3px;
  }
}
.matchitem-group {
  margin-bottom: 10px;
  &-cell {
    margin-bottom: 0;
    background-color: #fff;
    .van-cell__value {
      flex: none;
      text-align: center;
      padding-left: 15px;
    }
    .van-radio__icon {
      .van-icon {
        display: none !important;
      }
    }
    &__checked {
      background-color: rgba(245, 175, 80, 0.2) !important;
      .van-cell__title,
      .van-cell__label,
      .van-cell__value {
        color: #ff6600;
      }
    }
  }
  .match-enroll {
    text-align: center;
  }
}

.question-item {
  .van-cell__left-icon-wrap {
    color: red;
  }
}
</style>
